<template>
  <div class="flexColumn appBox">
    <div class="header flexBetween" :class="$store.state.isMobile?'ismobileHeader':'pcHeader'">
      <div class="flexCenter" v-if='tabList.length'>
        <p style="width:1.2rem" v-for="(item,index) in tabList" @click="TabChange(item)"
          :class="{ stationCur:stationPerson == index }" :key="index">
          {{item.name}}
        </p>
      </div>
      <div class="titleTab cascader flexEnd titleHeight">
        <div class="flexBetween" @click="dataClick">
          <span class="dataPlacehoder">{{dateDefault}}</span>
          <i class="el-icon-arrow-down fontColor999"></i>
        </div>
      </div>
      <div>
        <mt-datetime-picker ref="pickerData" type="date" v-model="pickerVisible" year-format="{value} 年"
          month-format="{value} 月" date-format="{value} 日" :start-date="startDate" :end-date="endDate"
          @confirm="changeDateTime"></mt-datetime-picker>
      </div>
    </div>
    <section>
      <div class="sectionContent">
        <div class="flexCenter" style="background: beige; padding: 0.2rem;" >
            <p style="width:1.2rem" v-for="(item,index) in payTabList" @click="(payType = index), payTabChange('select' + (index + 1))"
            :class="{ stationCur:payType == index }" :key="index">
            {{item.name}}
          </p>
        </div>
        <keep-alive>
            <div class="sectionTopBox">
              <component v-bind:is="tabView"   :pay-type="payType" :station-person='stationPerson'></component>
            </div>
          </keep-alive>
      </div>
    </section> 
  </div>
</template>
<script>
  import select1 from "./prePay.vue";
  import select2 from "./postPay.vue";

  export default {
    components: {
      select1,
      select2
    },
    data() {
      return {
        headerTitle: "付鑫报告",
        tabView: "select1",
        areaValue: "0001",
        areaList: [
          { name: "西南", value: "0001" },
          { name: "华南", value: "0002" },
          { name: "长三角", value: "0003" },
          { name: "环渤海", value: "0004" }
        ],
        tabList: [{ name: "台长", value: '0' }, { name: "责任人", value: '1' }],
        payTabList: [{ name: "付薪前", value: '0' }, { name: "付薪后", value: '1' }],
        dateDefault: "",
        stationPerson: '0', // 0 台长 1 责任人
        payType: '0',
        endDate: new Date(),
        pickerVisible: new Date(),
        startDate: new Date(),
      };
    },
    created() {
      let year = new Date().getFullYear();
      let month1 = new Date().getMonth() + 1;
      let month = month1 > 10 ? month1 : "0" + (month1 - 1);
      this.startDate = new Date(Date.parse(year + "-" + month));
      this.endDate = new Date(Date.parse(year + "-" + month));
      this.pickerVisible = new Date(Date.parse(year + "-" + month));
      this.dateDefault = year + "/" + month;
    },
    watch: {
      // 支付数据变化时重新加载echarts 图表。

    },
    methods: {
      // 台长非台长
      TabChange(tab) {
        this.stationPerson = tab.value
      },
      payTabChange(tab) {
        this.tabView = tab
      },
      changeDateTime(val) {
        let timestr = new Date(val);
        let getYear = timestr.getFullYear();
        let getMon =
          timestr.getMonth() + 1 > 10
            ? timestr.getMonth() + 1
            : "0" + (timestr.getMonth() + 1);
        this.value = [getYear, getMon];
        this.dateDefault = getYear + "/" + getMon;
      },
      dataClick() {
        this.$refs.pickerData.open(); // 触发
      },
      updateData() {
        // this.getSweep() // 扫单
        // this.getlist4(); // 审核
        // this.getPay(); // 支付
        // this.getoverTime(); // 逾期单据
        // this.getoverTimePostion(); // 逾期单据 卡点位置分布
        // this.getOverTimePerson(); // 期单据 卡点责任人分

      }
    },
    mounted() {
      this.updateData();
    }
  };
</script>

<style>
  .stationCur {
    color: blue;
  }
</style>